<script>
import { defineComponent, markRaw } from 'vue';
// import { useDraggable } from '@vueuse/core';
import {
  RefreshRight,
  // More,
  // ArrowDown,
  // ArrowUp
} from "@element-plus/icons-vue";
export default defineComponent({
  name: "SupermapCard",
  components: {},
  props: {
    /**
     * 标题
    */
    title: {
      type: String,
      default: ''
    },
    /**
     * left 偏移
    */
    posX: {
      type: Number,
      default: 0
    },
    /**
     * top 偏移
    */
    posY: {
      type: Number,
      default: 0
    },
    /**
     * right 偏移
    */
    posRight: {
      type: Number,
      default: 0
    },
    posBottom: {
      type: Number,
      default: 0
    },
    /**
     * 是否展示 header 的操作方法
    */
    showHeaderFunction: {
      type: Boolean,
      default: true
    },
    /**
     * 左右两侧的分布表示的各种方法
    */
    sideFunctions: {
      type: Array,
      default() { return [] }
    },
    /**
     * 定位方式
    */
    position: {
      type: String,
      default() { return 'absolute' }
    }
  },
  setup(props, { emit }) {
  },
  data() {
    return {
      // More,
      // ArrowDown,
      // ArrowUp,
      RefreshRight: markRaw(RefreshRight),
      showMain: true,
    }
  },
  mounted() {
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    emitFunc() {
      this.$emit('emitFunc');
    },
    // emitSideFunc(v) {
    //   this.$emit('emitSideFunc', v);
    //   switch (v.key) {
    //     case 'tunnel-check':
    //       break;
    //     default:
    //   }
    // }
  }
})
</script>

<template>
  <div class="supermap-card-wrapper">
    <header class="font-alimamashuheiti">
      <div class="drag-area" :class="{
        'normal': !showMain,
        'should-drag': $props.shouldDrag,
        'is-model': $props.isModel
      }">
        <div class="title" ref="elDraggableContainer">
          <div class="inner"><span class="">{{ $props.title }}</span></div>
        </div>
        <div class="function-area" v-if="showHeaderFunction">
          <!-- <el-button link :icon="showMain ? ArrowDown : ArrowUp" circle @click="showMain = !showMain"></el-button> -->
          <el-button link :icon="RefreshRight" circle @click="emitFunc"></el-button>
          <!-- <el-icon><RefreshRight /></el-icon> -->
        </div>
      </div>
    </header>
    <Transition name="fade">
      <main v-show="showMain">
        <slot></slot>
      </main>
    </Transition>
    <footer></footer>
    <!-- <div v-if="sideFunctions.length" class="side-function-area" :class="[
      distributionSide
    ]">
      <div class="block-border" :class="[
        item.active ? 'active' : ''
      ]" @click="emitSideFunc(item)" v-for="(item, index) in sideFunctions" :key="index">
        <span>{{ item.title }}</span>
      </div>
    </div> -->
  </div>
</template>
<style lang="less" scoped>
@color-base-blue: rgb(42, 76, 227);
@color-note: rgb(0, 255, 255);
@border-radius: 3px;
@width-corner: 15px;
@width-side: -110px;

.supermap-card-wrapper {
  pointer-events: all;
  transition-property: transform, opacity;
  transition-duration: .5s, 1s;
}

.supermap-card-wrapper header {
  font-style: italic;
  height: 3.8rem;
  background-image: url(./images/main-header.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center 8px;
  // border: 1px solid red;
}

.drag-area {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  height: 36px;
  line-height: 36px;
  padding: 5px 10px 5px 0;
  background-repeat: no-repeat;
  background-position: right;

  &.normal {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  &>.title {
    color: #fff;
    flex: 1;
    user-select: none;

    &>.inner {
      position: relative;
      font-size: 16px;
      padding-left: 24px;
      font-weight: bolder;

      &:before {
        content: "";
        position: absolute;
        bottom: 1px;
        left: -7px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
    }
  }

  &>.function-area {
    width: 30px;
    text-align: center;
  }
}

.side-function-area {
  position: absolute;
  width: calc(-1 * @width-side);
  height: 100px;
  top: 0;
  text-align: center;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
}

.side-function-area>.block-border {
  border-top: none;
  transition: color .3s;
  transform: skew(-15deg);
  border: 1px solid;
  border-left-width: 3px;
  border-bottom-width: 1px;
  border-image: linear-gradient(to right, rgba(184, 255, 77, 1), transparent);
  border-image-slice: 1 1 1 1;
  background-image: linear-gradient(to right, #3c50b4, transparent);
  border-right: none;
  border-top: none;
  margin-bottom: 5px;

  &:hover,
  &.active {
    color: #daa520;
  }
}

.side-function-area.left {
  // 取相反数
  right: @width-side - 10px;
}

.side-function-area.right {
  left: @width-side - 10px;
}
</style>